<template>
  <div class="clw_nav">
    <div class="nav_menu">
      <Menu
        :open-names="openNames"
        :active-name="activeName"
        style="width: 100%; height: 100%"
        theme="dark"
      >
        <template v-for="menu in navList">
          <MenuItem
            v-if="menu.children.length === 0"
            :name="menu.path"
            :to="menu.path"
          >
            <Icon :type="menu.icon"></Icon>
            {{ menu.name }}
            <!--            <Badge :count="10"></Badge>-->
          </MenuItem>
          <Submenu v-else :name="menu.path" :to="menu.path">
            <template #title>
              <Icon :type="menu.icon"></Icon>
              {{ menu.name }}
            </template>
            <MenuItem
              v-for="menuItem in menu.children"
              :key="menuItem.to"
              :name="menuItem.path"
              :to="menuItem.path"
            >
              <Icon :type="menuItem.icon"></Icon>
              {{ menuItem.name }}
              <Badge :count="10" v-if="menuItem.name === '概览'" class-name="custom-badge-alone"></Badge>
            </MenuItem>
          </Submenu>
        </template>
      </Menu>
    </div>
    <div class="nav_view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClwNav",
  props: {
    navList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      activeName: ""
    };
  },
  computed: {
    openNames() {
      let flg = this.navList.filter((item) => {
        return item.children.length > 0;
      });
      return flg.map((item) => {
        return item.path;
      });
    }
  },
  methods: {},
  watch: {
    navList: {
      immediate: true,
      deep: true,
      handler() {
      }
    },
    $route: {
      immediate: true,
      deep: true,
      handler(value) {
        this.activeName = value.fullPath;
        if (value.fullPath === "/comlibrary") {
          this.$router.push(this.navList[0].children[0].path);
        }
      }
    }
  },
  mounted() {
  }
};
</script>

<style scoped lang="less">
.clw_nav {
  width: 100%;
  height: 100%;
  display: flex;

  .nav_menu {
    min-width: 180px;
    width: 12%;
    height: 100%;
  }

  .nav_view {
    width: 88%;
    height: 100%;
  }
}
</style>
<style lang="less">
.ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
  position: relative;
}

.ivu-badge {
  position: absolute;
  right: 2%;
}
</style>
